<template>
  <div class="artist-detail">
    <detail-panel :image='image'
                  :notice='notice'
                  @pullUpLoadEvent='pullUpLoadEvent'
                  @leftClick='$router.go(-1)'
                  @scrollTop='scrollTop'
                  gradient
                  ref="detailPanel"
    >
      <div slot="background" class="background">
        <div class="artist-info">
          <div class="left">
            <span class="name">{{ artist.name }}</span>
            <div class="follows" v-if="artist.accountId">
              <span v-if="artist.accountId">关注{{ artist.follows }} | </span><span>粉丝{{ artist.followeds }}</span>
            </div>
            <div class="auth-types" v-if="artist && artist.allAuthTypes">
              <span>{{ artist.allAuthTypes[0].type === 2 ? '入驻艺人' : artist.allAuthTypes[0].desc }}</span>
              <van-tag class="types" plain v-for="(tag, index) of artist.allAuthTypes[0].tags" :key="index">{{ tag }}</van-tag>
            </div>
          </div>
          <div class="btn" v-if="artist.accountId">
            <div>
              <van-button v-if="!artist.followed" round size="small" color="red" icon="plus" @click="follow(1)">关注</van-button>
              <div class="cancel" v-else @click="follow(2)">
                <i class="iconfont icon-guanzhuchenggong" />
              </div>
              <van-button round size="small" icon="envelop-o" color="#c5c5c5" style="opacity: 0.8;">发私信</van-button>
            </div>
          </div>
        </div>
      </div>

      <div slot="fixedTop" ref="fixedTop">
        <van-tabs v-model="active" @click="onTabClick" class="tabs">
          <van-tab v-for="(tab, index) of tabs" :title="tab.title" :key="index"></van-tab>
        </van-tabs>
      </div>

      <slider @change="onSliderChange" ref="slider" :style="sliderStyle">
        <div v-for="(item, index) of contents" :key="index">
          <component :is='item.component'
                      :id="item.id"
                      :accountId="item.accountId"
                      :pagination='item.pagination'
                      :ref="'component-' + index"
                      @moreHot='onTabClick(active + 1)'
          />
        </div>
      </slider>
    </detail-panel>
  </div>
</template>
<script>
import DetailPanel from 'base/detail-panel'
import Slider from 'base/slider'
import Artist from '@/entity/Artist'
import Home from './components/home'
import Song from './components/song'
import Album from './components/album'
import Mv from './components/mv'
import Event from './components/event'

import { follow } from 'api/follow'

const tabs = [
  {
    title: '主页',
    component: 'home'
  },
  {
    title: '歌曲',
    component: 'song'
  },
  {
    title: '专辑',
    component: 'album',
    pagination: {
      limit: 10,
      offset: 0
    }
  },
  {
    title: 'MV',
    component: 'mv',
    pagination: {
      limit: 10,
      offset: 0
    }    
  },
  {
    title: '动态',
    component: 'Event'
  }
]

export default {
  components: {
    DetailPanel,
    Slider,
    Home,
    Song,
    Album,
    Mv,
    Event
  },
  data() {
    return {
      tabs: tabs,
      artist: {},
      active: 0,
      top: 0,
      notice: null,
      contents: [],
      sliderHeight: 0,
    }
  },
  computed: {
    image() {
      return this.artist.img1v1Url
    },
    headerHeight() {
      return this.$refs.detailPanel.headerHeight
    },
    sliderStyle() {
      return {
        height: `${this.sliderHeight}px`
      }
    }
  },
  created() {
    this.init()
    this.getSingerDetail()
  },
  methods: {
    init() {
      for (let index = 0; index < tabs.length; index++) {
        const content = {
          component: tabs[index].component,
        }
        const pagination = tabs[index].pagination
        if (pagination) {
          content.pagination = pagination
        }

        this.contents.push(content)
      }
    },
    async getSingerDetail() {
      const { artistName, artistId } = this.$route.params
      this.artist.id = artistId
      this.artist.name = artistName
      if (artistName) {
        let artist = new Artist(artistName)
        this.artist = await artist.getArtistDetail()

        if (!this.artist.accountId) {
          this.tabs.length = 4
        }

        this.contents[0].id = this.artist.id
        this.contents[0].accountId = this.artist.accountId
        this.reSize('init')
      }
    },
    follow(type) {
      if (type !== 1) {
        const _this = this
        this.$dialog.confirm({
          message: '取消关注后关注时常将重新计算，真的要取消？',
          confirmButtonText: '取消关注',
          confirmButtonColor: 'red',
          cancelButtonText: '继续做朋友',
          cancelButtonColor: 'red',
          beforeClose(action, done) {
            if (action === 'confirm') {
              _this.followByHttp(type).finally(() => done())
            } else {
              done()
            }
          }
        })
      } else {
        this.followByHttp(type)
      }
    },
    followByHttp(type) {
      return follow(this.artist.accountId, type).then(res =>{
        const { code } = res
        if (code === 200) {
          this.artist.followed = type === 1
        }
      })
    },
    scrollTop(value) {
      this.notice = value ? this.artist.name : ''
      this.isScrollTop = value
    },
    onTabClick(index) {
      this.$refs.slider.goToPage(index, 0, 400)
      this.loadComponent()
    },
    onSliderChange(index) {
      this.active = index
      this.loadComponent()

      if (this.isScrollTop) {
        this.$refs.detailPanel.goTop()
      }
      this.reSize()
    },
    loadComponent() {
      if (!this.contents[this.active].id) {
        this.contents[this.active].id = this.artist.id
        this.contents[this.active].accountId = this.artist.accountId
      }
    },
    reSize(type) {      
      function initFn() {
        this.reSizeFunc()
      }

      const func = type === 'init' ? initFn.bind(this) : this.reSizeFunc.bind(this)

      setTimeout(() => {
        const comp = this.$refs[`component-${this.active}`][0]
        comp.promise.finally(() => this.$nextTick(() => func()))
      })
    },
    reSizeFunc() {
      const offsetHeight = this.$refs.slider.children[this.active].offsetHeight
      const maxHeight = window.screen.height - this.headerHeight - this.$refs.fixedTop.offsetHeight
      if (offsetHeight > maxHeight) {
        this.sliderHeight = offsetHeight
      } else {
        this.sliderHeight = maxHeight
      }
      this.$refs.detailPanel.refresh()
    },
    pullUpLoadEvent(finish) {
      const { pagination, nodata } = this.contents[this.active]
      if (pagination && !nodata) {
        pagination.offset++
        this.$refs[`component-${this.active}`][0].getList().then(res => {
          if (res.length === 0) {
            this.contents[this.active].nodata = true
          }
          this.reSizeFunc()
          finish()
        })
      } else {
        finish()
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';
.artist-detail{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 5;
  background-color: white;
  .background{
    height: 100%;
    background-color: transparent;
    .artist-info{
      position: absolute;
      width: 100%;
      bottom: 0;
      padding: 0 10px;
      display: flex;
      height: 70px;
      color: white;
      >div{
        float: left;
        width: 50%;
        .name{
          font-size: @font-size-large;
        }
        .follows{
          margin-top: 10px;
        }
      }
      .btn{
        position: relative;
        >div{
          position: absolute;
          bottom: 20px;
          right: 40px;
        }
        .cancel{
          position: relative;
          height: 30px;
          width: 30px;
          border-radius: 50%;
          background-color: #bfbebe;
          float: left;
          margin-right: 10px;
          font-size: @font-size-large;
          opacity: 0.8;
          >i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            font-size: 1em;
          }
        }
      }
      .auth-types{
        margin-top: 5px;
        .types{
          background-color: transparent;
          font-size: 8px;
          margin-right: 5px;
          color: white;
        }
      }
    }
  }
}
.tabs{
	width: 100%;
	z-index: 3;
}
</style>